<!DOCTYPE html>
<body style="overflow: auto;">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>minAI工具箱</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-no5q7vA75rwu6X8ikdbLgG7/tMtadi1VhEaLKroTzO4vLQsURaM6Uom3wLkZbXsb1wCH4+YJ2kAAHqYh00/QJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f1f8e9;
        }

        header {
            text-align: center;
            padding: 10px 0;
            background-color: #81c784;
        }

        h1 {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
        }

        main {
            margin: 10px 0;
        }

        .category {
            margin-bottom: 20px;
            overflow-y: auto;
        }

        h2 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .tool-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 5px -5px;
        }

        .tool {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 5px;
            width: calc(50% - 10px);
            background-color: #fff;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            transition: all .3s ease;
            text-align: center;
        }

        .tool:hover {
            transform: translateY(-3px);
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }

        .icon {
            font-size: 50px;
            margin-bottom: 5px;
        }

        span {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            line-height: 1.5;
        }

        footer {
            background-color: #81c784;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .link {
            color: #fff;
            text-decoration: underline;
        }

        .link:hover {
            color: #e0f7fa;
        }

        /* 自定义滚动条样式 */
        .category::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #f1f8e9;
        }

        .category::-webkit-scrollbar-thumb {
            background-color: #a5d6a7;
            border-radius: 4px;
            box-shadow: inset 2px 2px 2px #81c784;
        }
    </style>
</head>
<body>
<!-- 工具箱主页 -->
<header>
    <h1>minAI工具箱</h1>
</header>

<main>
    <div class="category">
        <h2>工具</h2>
        <div class="tool-row">
            <a href="抽奖.html" class="tool">
                <i class="icon fas fa-users"></i>
                <span>抽奖</span>
            </a>
            <a href="IP天气签名档.html" class="tool">
                <i class="icon fas fa-users"></i>
                <span>IP天气签名档</span>
            </a>
            <a href="亲戚关系计算器.html" class="tool">
                <i class="icon fas fa-users"></i>
                <span>亲戚关系计算器</span>
            </a>
            <a href="体重BMI计算器.html" class="tool">
                <i class="icon fas fa-weight"></i>
                <span>体重BMI计算器</span>
            </a>
            <a href="倒计时.html" class="tool">
                <i class="icon far fa-hourglass"></i>
                <span>倒计时</span>
            </a>
            <a href="单位转换.html" class="tool">
                <i class="icon fas fa-ruler-combined"></i>
                <span>单位转换</span>
            </a>
            <a href="密码生成器.html" class="tool">
                <i class="icon fas fa-key"></i>
                <span>密码生成器</span>
            </a>
            <a href="摩斯电码.html" class="tool">
                <i class="icon fas fa-broadcast-tower"></i>
                <span>摩斯电码</span>
            </a>
            <a href="文字转语音.html" class="tool">
                <i class="icon fas fa-volume-up"></i>
                <span>文字转语音</span>
            </a>
            <a href="代码编辑器.html" class="tool">
                <i class="icon fas fa-volume-up"></i>
                <span>代码编辑器</span>
            </a>
            <a href="番茄时钟.html" class="tool">
                <i class="icon fas fa-clock"></i>
                <span>番茄时钟</span>
            </a>
            <a href="网络测速.html" class="tool">
                <i class="icon fas fa-network-wired"></i>
                <span>网络测速</span>
            </a>
            <a href="HTML代码预览器.html" class="tool">
                <i class="icon fas fa-network-wired"></i>
                <span>HTML代码预览器</span>
            </a>
            <a href="计算器.html" class="tool">
                <i class="icon fas fa-calculator"></i>
                <span>计算器</span>
            </a>
            <a href="银行卡类型查询.html" class="tool">
                <i class="icon far fa-credit-card"></i>
                <span>银行卡类型查询</span>
            </a>
            <a href="函数图像绘制工具.html" class="tool">
                <i class="icon far fa-chart-area"></i>
                <span>函数绘制</span>
            </a>
            <a href="成绩分析系统.html" class="tool">
                <i class="icon far fa-chart-bar"></i>
                <span>成绩分析</span>
            </a>
            <a href="文件格式转换工具.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>HTML转PDF</span>
            </a>
			<a href="灵魂涂鸦/index.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>灵魂涂鸦</span>
            </a>
            <a href="QQ头像获取工具.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>QQ头像获取工具</span>
            </a>
			<a href="小记.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>小记</span>
            </a>
            <a href="垃圾分类查询.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>垃圾分类查询</span>
            </a>
			<a href="分享框.html" class="tool">
                <i class="icon fas fa-file-upload"></i>
                <span>冷静草稿框</span>
            </a>	
			<a href="二维码生成.html" class="tool">
                 <i class="icon fas fa-cat"></i>
                 <span>二维码生成</span>
            </a>	
			<a href="屏幕测试.html" class="tool">
                 <i class="icon fas fa-cat"></i>
                 <span>屏幕测试</span>
            </a>	
            <a href="查IP.html" class="tool">
                 <i class="icon fas fa-cat"></i>
                 <span>IP查询</span>
            </a>
			<a href="查快递.html" class="tool">
                 <i class="icon fas fa-file-upload"></i>
                 <span>查快递</span>
            </a>		
            <a href="https://member.bilibili.com/york/videoup?platform=PWA&source=launcher" class="tool">
                 <i class="icon fas fa-file-upload"></i>
                 <span>B站清新投稿</span>
            </a>
        </div>
    </div>
    <div class="category">
        <h2>游戏</h2>
        <div class="tool-row">
            <a href="扫雷.html" class="tool">
                <i class="icon fas fa-bomb"></i>
                <span>扫雷</span>
            </a>
            <a href="猜拳游戏.html" class="tool">
                <i class="icon far fa-hand-rock"></i>
                <span>猜拳游戏</span>
            </a>
            <a href="数字华容道.html" class="tool">
                <i class="icon fab fa-wolf-pack-battalion"></i>
                <span>数字华容道</span>
            </a>
            <a href="点击方块.html" class="tool">
                <i class="icon fas fa-cat"></i>
                <span>点击方块</span>
            </a>
            <a href="山鸡跳跳乐.html" class="tool">
                <i class="icon fas fa-fighter-jet"></i>
                <span>山鸡跳跳乐</span>
            </a>
            <a href="打砖块.html" class="tool">
                <i class="icon fas fa-cat"></i>
                <span>打砖块</span>
            </a>
            <a href="走迷宫.html" class="tool">
                <i class="icon fas fa-cat"></i>
                <span>走迷宫</span>
            </a>
			<a href="文字游戏.html" class="tool">
                <i class="icon fas fa-cat"></i>
                <span>文字游戏</span>
            </a>
        </div>
    </div>
</main>
！
！
！
！
！
！
<footer style="position: fixed; bottom: 0;">
<p>© 2023 minAI工具箱</p>
<p>官网：<a href="https://minAI.gitee.io/" class="link">https://minAI.gitee.io/</a></p>
</footer>

<!-- 自定义滚动条脚本 -->
<script>
    document.querySelectorAll('.category').forEach(function (elem) {
        elem.addEventListener('mouseover', function () {
            elem.style.overflowY = 'scroll';
        });
        elem.addEventListener('mouseout', function () {
            elem.style.overflowY = 'hidden';
        });
    });
</script>

</body>
</html>